<template>
    <div class="ls-goods">
        <div class="ls-goods__top ls-card">
            <el-alert
                title="温馨提示：1.管理分销会员的身份，每个分销会员可以同时拥有多个身份，享受不同权益"
                type="info"
                show-icon
                :closable="false"
            >
            </el-alert>
        </div>

        <div class="m-t-24 ls-card">
            <div class="m-b-24">
                <el-button type="primary" size="mini" @click="openDrawer">新增分销身份 </el-button>
            </div>

            <MyTable ref="my_table" :columns="columns" :list-api="tableListApi" />

            <MyDrawer
                class="distribution-identity-drawer"
                :title="drawerTitle"
                :visible.sync="drawerVisible"
                :mode="drawerMode"
                @submit="submit"
            >
                <DistributionGradeDetail
                    ref="details"
                    :mode="drawerMode"
                    :visible.sync="drawerVisible"
                    :edit-info="activeInfo"
                    v-bind="$attrs"
                    @success="successHandler"
                ></DistributionGradeDetail>
            </MyDrawer>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Ref, Vue } from 'vue-property-decorator'

import { apiDistributionIdentityDel, apiDistributionIdentityLists } from '@/api/distribution/distribution'
import LsDialog from '@/components/ls-dialog.vue'
import LsPagination from '@/components/ls-pagination.vue'
import MyDrawer from '@/components/MyDrawer/MyDrawerIndex.vue'
import MyTable from '@/components/MyTable/MyTableIndex.vue'
import { PageMode } from '@/utils/type'
import { RequestPaging } from '@/utils/util'

import DistributionGradeDetail from './distribution_identity_detail.vue'

@Component({
    components: {
        LsPagination,
        LsDialog,
        MyTable,
        MyDrawer,
        DistributionGradeDetail
    }
})
export default class DistributionGoods extends Vue {
    @Ref() readonly my_table!: MyTable
    @Ref() readonly details!: any

    /** S Data **/

    pager = new RequestPaging()

    tableListApi = apiDistributionIdentityLists

    columns = [
        {
            prop: 'name',
            label: '身份名称',
            width: 180
        },
        {
            prop: 'remark',
            label: '描述',
            width: 180
        },
        {
            prop: 'member_num',
            label: '拥有会员数',
            width: 180
        },
        {
            prop: 'discount',
            label: '折扣',
            width: 180
        },
        {
            prop: 'operation',
            label: '操作',
            operation: [
                { name: '详情', type: 'text', clickFun: this.onPreviewHandler },
                { name: '编辑', type: 'text', clickFun: this.onEditHandler },
                { name: '删除', type: 'text', clickFun: this.onDelHandler }
            ]
        }
    ]
    activeInfo = null
    drawerTitle = ''
    drawerVisible = false
    drawerMode: string = PageMode.ADD

    /** E Data **/

    /** S Method **/

    // 获取分销列表
    getDistributionData(): void {
        this.pager.request({
            callback: apiDistributionIdentityLists,
            params: {}
        })
    }
    openDrawer() {
        this.drawerTitle = '新增分销身份'
        this.drawerMode = PageMode.ADD
        this.activeInfo = null
        this.drawerVisible = true
    }
    onPreviewHandler(row: any) {
        this.drawerTitle = `查看分销身份 -【${row.name}】`
        this.drawerMode = 'preview'
        this.activeInfo = row
        this.drawerVisible = true
    }
    onEditHandler(row: any) {
        this.drawerTitle = `编辑分销身份 -【${row.name}】`
        this.drawerMode = PageMode.EDIT
        this.activeInfo = row
        this.drawerVisible = true
    }
    onDelHandler(row: { id: string }) {
        const id = row.id
        this.$confirm('是否确认删除该视频?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
            .then(() => {
                apiDistributionIdentityDel({ id })
                    .then(() => {
                        this.$message.success('删除成功!')
                        this.successHandler()
                    })
                    .catch(() => {
                        this.$message.success('删除失败!')
                    })
            })
            .catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
    }

    submit() {
        if (this.details && this.details.onSubmit) {
            this.details.onSubmit()
        }
    }
    successHandler() {
        this.drawerVisible = false
        // @ts-ignore
        if (this.my_table && this.my_table.refresh) {
            // @ts-ignore
            this.my_table.refresh()
        }
    }
    /** E Method **/

    created() {}
}
</script>

<style lang="scss" scoped>
.ls-goods {
    &__top {
        padding-bottom: 6px;
    }
    .goods-search {
        .ls-input-price {
            width: 180px;
        }
    }
    .ls-goods__content {
        padding-top: 0;
    }
}
.distribution-identity-drawer {
    ::v-deep .my-drawer__body {
        background: #eee;
    }
}
</style>
